<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>

    <link rel="stylesheet" href="/static/layui/layui/css/layui.css" />
</head>

<body>

    <div id="show_div" style="margin-top: 20px;">
        <form class="layui-form" action="{:url('save')}">
            <input type="hidden" value="{$info.id}" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" lay-verify="title" placeholder="请输入标题" autocomplete="off" class="layui-input" value="{$info.title}">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-block">
                    <input type="text" name="price" lay-verify="price" autocomplete="off" class="layui-input" value="{$info.price}">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block">
                    <input type="text" name="sku" lay-verify="sku" autocomplete="off" class="layui-input" value="{$info.sku}">
                </div>
            </div>

            <div class=" layui-form-item ">
                <label class="layui-form-label ">浏览次数</label>
                <div class="layui-input-block ">
                    <input type="text " name="views " lay-verify="views " placeholder="请输入标题 " autocomplete="off " class="layui-input " value="{$info.views}">
                </div>
            </div>

            <div class=" layui-form-item ">
                <label class="layui-form-label ">排序</label>
                <div class="layui-input-block ">
                    <input type="text " name="sort " lay-verify="sort " autocomplete="off " class="layui-input " value="{$info.sort} ">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="1" title="启用">
                    <input type="radio" name="status" value="0" title="禁用" checked>
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label ">上传图片</label>
                <button type="button " class="layui-btn " id="test1 ">上传图片</button>
                <div class="layui-upload-list ">
                    <img id="demo1 " style=" width :200px;margin-left: 100px; " class="layui-upload-img " src="{$info.img} ">
                    <!-- <p id=" demoText "></p> -->
                </div>
                <input type="hidden" name="img " id="img ">
            </div>


            <div class="layui-form-item layui-form-text ">
                <label class="layui-form-label ">备注</label>
                <div class="layui-input-block ">
                    <textarea name="desc " placeholder="请输入内容 " class="layui-textarea " name="introduce ">{$info.introduce}</textarea>
                </div>
            </div>

            <div class="layui-form-item layui-form-text ">
                <label class="layui-form-label ">文章内容</label>
                <div class="layui-input-block ">
                    <script id="editor " name="content " text="text/plain " style="width: 100%; height: 400px; ">
                        {
                            $info.content
                        }
                    </script>
                </div>
            </div>


            <div class=" layui-form-item ">
                <div class=" layui-input-block ">
                    <button class=" layui-btn " type="submit ">保存</button>

                </div>
            </div>
        </form>
    </div>

    <script src=" /static/layui//layui/layui.js ">
    </script>
    <script src=" /static/layui//layui/layui.js "></script>
    <script text=" text/javascript " src=" /static/jquery/jquery.min.js "></script>
    <script text=" text/javascript ">
        //JS 
        layui.use(['element', 'layer', 'util', 'upload'], function() {
            var element = layui.element,
                layer = layui.layer,
                util = layui.util,
                upload = layui.upload,
                $ = layui.jquery;
            var form = layui.form

            var uploadInst = upload.render({
                elem: '#test1',
                url: " {:url( 'Upload/upload')} ",
                before: function(obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                },
                done: function(res) {
                    //如果上传成功
                    if (res.code == 200) {
                        $('#img').val(res.url);
                        return layer.msg(res.msg);

                    } else {
                        return layer.msg(res.msg);
                    }

                },
                error: function() {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style=" color: #FF5722; ">上传失败</span> <a class=" layui-btn layui-btn-xs demo - reload ">重试</a>');
                    demoText.find('.demo-reload').on('click', function() {
                        uploadInst.upload();
                    });
                }


            });
            $("form ").submit(function(e) {
                var res = $(this).serialize();
                var url = $(this).attr('action');
                $.ajax({
                    url: url,
                    data: res,
                    type: 'post',
                    success: function(data) {
                        if (data.code == 200) {
                            layer.alert(data.msg, {
                                icon: 3
                            })

                        } else {
                            layer.msg(data.msg)
                        }

                    }
                });

                return false;
            })





        });
    </script>

</body>

</html>